<template>
  <div class="room-log">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>结算管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        分销中心管理
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form :inline="true">
        <el-form-item label="状态：">
          <!-- 1：审核中、2：提现成功、3：提现失败、4：审核通过、5：审核失败 -->
          <el-dropdown @command="setState">
            <span class="el-dropdown-link">
              {{stateStr}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{title:'入住状态',id:''}">全部</el-dropdown-item>
              <el-dropdown-item :command="{title:'入住中',id:'1'}">审核中</el-dropdown-item>
              <el-dropdown-item :command="{title:'待打扫房间',id:'2'}">提现成功</el-dropdown-item>
              <el-dropdown-item :command="{title:'待账单确认',id:'3'}">提现失败</el-dropdown-item>
              <el-dropdown-item :command="{title:'退房',id:'4'}">审核通过</el-dropdown-item>
              <el-dropdown-item :command="{title:'退房',id:'5'}">审核失败</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item label="提现时间：">
          <el-date-picker type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="setInOutTime"
            v-model="startEndTime"
            style="width:300px">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入用户ID/昵称"
            v-model="search"
            style="width:300px"
            clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            @click.native="_search"
            class="searc"
            style=" line-height: 32px;padding: 0 21px;">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item class="easy-table">
          <el-table :data="drawMoney"
            style="width: 100%"
            max-height="600">
            <el-table-column prop="id"
              label="订单ID"
              min-width="100">
            </el-table-column>
            <el-table-column prop="account"
              label="登录名"
              min-width="100">
            </el-table-column>
            <el-table-column label=" 用户类型"
              min-width="100">
              <template slot-scope="scope">
                <span>{{scope.row.type ==1 ? '会员':'员工'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name"
              label="姓名"
              min-width="100">
            </el-table-column>
            <el-table-column label="申请状态"
              min-width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.state ==1">审核中</span>
                <span v-if="scope.row.state ==2">提现成功</span>
                <span v-if="scope.row.state ==3">提现失败</span>
                <span v-if="scope.row.state ==4">审核通过</span>
                <span v-if="scope.row.state ==5">审核失败</span>
              </template>
            </el-table-column>
            <el-table-column prop="bankNum"
              label="流水号"
              min-width="150">
            </el-table-column>
            <el-table-column prop="requestTime"
              label="申请时间"
              min-width="100">
            </el-table-column>
            <el-table-column prop="money"
              label="申请金额"
              min-width="100">
            </el-table-column>
            <el-table-column label="操作"
              min-width="150">
              <template slot-scope="scope">
                <div v-if="scope.row.state ==1">
                  <el-button type="text"
                    @click="_setState(scope.row,1)">审核通过</el-button>
                  <el-button type="text"
                    @click="_setState(scope.row,2)">审核不通过</el-button>
                </div>
                <div v-if="scope.row.state ==3">
                  <el-button type="text"
                    @click="_setState(scope.row,3)">再次打款</el-button>
                  <el-button type="text"
                    @click="_setState(scope.row,4)">取消申请</el-button>
                </div>
              </template>

            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item class="fr">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="margin-top:20px">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getAtmList, settAtm } from "@/public/js/sale";
export default {
  data() {
    return {
      stateStr: "全部状态",
      pageNo: 1,
      pageSize: 10,
      total: 0,
      state: "",
      search: "",
      startEndTime: [],
      drawMoney: []
    };
  },
  created() {
    this._getAtmList();
  },

  mounted() {},
  methods: {
    //获取列表数据
    _getAtmList() {
      getAtmList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        state: this.state,
        search: this.search,
        startTime: this.startEndTime ? this.startEndTime[0] : "",
        endTime: this.startEndTime ? this.startEndTime[1] : ""
      }).then(res => {
        console.log(res);
        this.drawMoney = res.data.drawMoney;
        this.total = res.data.total;
      });
    },
    setState(val) {
      console.log(val);
      this.state = val.id;
      this.stateStr = val.title;
      this._rest();
    },
    _rest() {
      this.pageSize = 10;
      this.pageNo = 1;
      this._getAtmList();
    },
    setInOutTime(val) {
      this._rest();
    },
    _search() {
      this._rest();
    },
    _settAtm(id, state) {
      settAtm({
        id,
        state
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this._getAtmList();
        }
      });
    },

    _setState(data, type) {
      this.$confirm("是否继续此操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        switch (type) {
          // 审核通过
          case 1:
            this._settAtm(data.id, 2);
            break;
          case 2:
            this._settAtm(data.id, 3);
            break;
          case 3:
            this._settAtm(data.id, 1);
            break;
          case 4:
            this._settAtm(data.id, 3);
            break;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this._getAtmList();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this._getAtmList();
    }
  }
};
</script>
<style lang="scss" scoped>
</style>


